<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml" xmlns:shiro="http://www.w3.org/1999/xhtml">
<meta charset="utf-8">
<head th:include="include :: header">

</head>
<style>
	.columns{
		margin-left:10px;
	}
</style>
<body class="gray-bg">
<div class="wrapper wrapper-content ">
    <input id="year" name="year" th:value="${year}" type="hidden">
    <div id="main" style="width:100%;height:auto">
        <div id="map" style="width:100%;height:500px;padding:2%"></div>
        <div id="statePie" style="width:100%;height:500px;margin-top:10px;border-top:1px solid #ccc;padding:2%"></div>
        <div id="regionAnalysis" style="width:100%;height:600px;margin-top:10px;border-top:1px solid #ccc;padding:2%"></div>
        <div id="structure" style="width:100%;height:700px;margin-top:10px;border-top:1px solid #ccc;padding:2%"></div>
    </div>
</div>
<div th:include="include :: footer"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<script src="/js/map/js/china.js"></script>
<script type="text/javascript" >
    $(function() {

        $.ajax({
            url: "/jzweb/examinationCost/getAnalysis",
            type: "get",
            data: {
                year:$("#year").val()
            },
            success: function (r) {
                if(r==null){
                    layer.msg("未查询到数据！");
                }
                else {
                    statePie(r.statePie);
                    map(r.schoolNum, r.planStuNum, r.stuNum,r.examSchoolNum);
                    regionAnalysis(r.regionName,r.regionSchoolNum,r.regionPlanStuNum,r.regionStuNum,r.regionExamSchoolNum);
                }
            }
        });

        $.ajax({
            url: "/sys/user/marketUserList",
            type: "get",
            data: {
            },
            success: function (r) {
                structure(r.data)
            }
        });

    })
    function statePie(data) {
        var dom = document.getElementById("statePie");
        var myChart = echarts.init(dom);
        var option;
        option = {
            title: {
                text: '考试情况统计',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b}:{c}: ({d}%)',
            },
            toolbox: {
                show: true,
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            legend: {
                orient: 'vertical',
                left: 'left',
            },
            series: [
                {
                    name: '学校数量',
                    type: 'pie',
                    radius: '80%',
                    label : {
                        normal : {
                            formatter: '{b}:{c}',
                            textStyle : {
                                fontWeight : 'normal',
                                fontSize : 15
                            }
                        }
                    },
                    data: data,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        if (option && typeof option === 'object') {
            myChart.setOption(option);
        }

    }
    function regionAnalysis(regionName,regionSchoolNum,regionPlanStuNum,regionStuNum,examSchoolNum){
        var dom = document.getElementById("regionAnalysis");
        var myChart = echarts.init(dom);
        var option;
        var app = {};
        var posList = [
            'left', 'right', 'top', 'bottom',
            'inside',
            'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
            'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
        ];

        app.configParameters = {
            rotate: {
                min: -90,
                max: 90
            },
            align: {
                options: {
                    left: 'left',
                    center: 'center',
                    right: 'right'
                }
            },
            verticalAlign: {
                options: {
                    top: 'top',
                    middle: 'middle',
                    bottom: 'bottom'
                }
            },
            position: {
                options: posList.reduce(function (map, pos) {
                    map[pos] = pos;
                    return map;
                }, {})
            },
            distance: {
                min: 0,
                max: 100
            }
        };

        app.config = {
            rotate: 90,
            align: 'left',
            verticalAlign: 'middle',
            position: 'insideBottom',
            distance: 15,
            onChange: function () {
                var labelOption = {
                    normal: {
                        rotate: app.config.rotate,
                        align: app.config.align,
                        verticalAlign: app.config.verticalAlign,
                        position: app.config.position,
                        distance: app.config.distance
                    }
                };
                myChart.setOption({
                    series: [{
                        label: labelOption
                    }, {
                        label: labelOption
                    }, {
                        label: labelOption
                    }, {
                        label: labelOption
                    }]
                });
            }
        };


        var labelOption = {
            show: true,
            position: app.config.position,
            distance: app.config.distance,
            align: app.config.align,
            verticalAlign: app.config.verticalAlign,
            rotate: app.config.rotate,
            formatter: '{c} ',
            fontSize: 15,
            rich: {
                name: {
                }
            }
        };

        option = {
            title: {
                text: '区域负责人考试情况统计'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: [ '总计划考试人数', '总实际考试人数','负责学校数','实考学校数']
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                left: 'right',
                top: 'center',
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            xAxis: [
                {
                    type: 'category',
                    axisTick: {show: false},
                    data: regionName
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '总计划考试人数',
                    type: 'bar',
                    label: labelOption,
                    emphasis: {
                        focus: 'series'
                    },
                    data: regionPlanStuNum
                },
                {
                    name: '总实际考试人数',
                    type: 'bar',
                    label: labelOption,
                    emphasis: {
                        focus: 'series'
                    },
                    data: regionStuNum
                },{
                    name: '负责学校数',
                    type: 'bar',
                    barGap: 0,
                    label: labelOption,
                    emphasis: {
                        focus: 'series'
                    },
                    data: regionSchoolNum
                },{
                    name: '实考学校数',
                    type: 'bar',
                    barGap: 0,
                    label: labelOption,
                    emphasis: {
                        focus: 'series'
                    },
                    data: examSchoolNum
                },
            ]
        };
        if (option && typeof option === 'object') {
            myChart.setOption(option);
        }
    }

        function map(schoolNum,planStuNum,stuNum,examSchoolNum) {
            var dom = document.getElementById("map");
            var myChart = echarts.init(dom);
            var option;
            option = {
                        title: {
                            text: '各省考试情况统计',
                            x: 'center'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter:function (params){
                                var res = params.name+'<br/>';
                                var myseries = option.series;
                                for (var i = 0; i < myseries.length; i++) {
                                    for(var j=0;j<myseries[i].data.length;j++){
                                        if(myseries[i].data[j].name==params.name){
                                            res+=myseries[i].name +' : '+myseries[i].data[j].value+'</br>';
                                        }
                                    }
                                }
                                return res;
                            }
                        },
                toolbox: {
                    show: true,
                    feature: {
                        mark: {show: true},
                        dataView: {show: true, readOnly: false},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                        legend: {
                            orient: 'vertical',
                            x: 'left',
                            data: ['学校数量','实考学校数量','计划考试人数','实际考试人数']
                        },
                        dataRange: {
                            min: 0,
                            max: 10000,
                            x: 'left',
                            y: 'bottom',
                            text: ['高', '低'],           // 文本，默认为数值文本
                            calculable: true,
                            inRange: {
                                color: ['#e0ffff', '#58aaeb'],
                                symbolSize: [30, 100]
                            }
                        },
                        roamController: {
                            show: true,
                            x: 'right',
                            mapTypeControl: {
                                'china': true
                            }
                        },
                        series: [
                            {
                                name: '学校数量',
                                type: 'map',
                                mapType: 'china',
                                roam: false,
                                itemStyle: {
                                    normal: {label: {show: true}},
                                    emphasis: {label: {show: true}}
                                },
                                data: schoolNum
                            },{
                                name: '实考学校数量',
                                type: 'map',
                                mapType: 'china',
                                roam: false,
                                itemStyle: {
                                    normal: {label: {show: true}},
                                    emphasis: {label: {show: true}}
                                },
                                data: examSchoolNum
                            },{
                                name: '计划考试人数',
                                type: 'map',
                                mapType: 'china',
                                roam: false,
                                itemStyle: {
                                    normal: {label: {show: true}},
                                    emphasis: {label: {show: true}}
                                },
                                data: planStuNum
                            },{
                                name: '实际考试人数',
                                type: 'map',
                                mapType: 'china',
                                roam: false,
                                itemStyle: {
                                    normal: {label: {show: true}},
                                    emphasis: {label: {show: true}}
                                },
                                data: stuNum
                            }
                        ]
                    };


                    if (option && typeof option === 'object') {
                        myChart.setOption(option);
                    }
        }

        function structure(data){

            // $.get('/structure.json', function (data) {
            var dom = document.getElementById("structure");
            var myChart = echarts.init(dom);
            var option;
            option = {
                title: {
                    text: '市场部结构表'
                },
                tooltip: {
                    trigger: 'item',
                    triggerOn: 'mousemove'
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: {show: true},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                series: [
                    {
                        type: 'tree',
                        data: [data],
                        top: '1%',
                        left: '7%',
                        bottom: '1%',
                        right: '20%',
                        symbolSize: 7,
                        initialTreeDepth:4,
                        label: {
                            position: 'left',
                            verticalAlign: 'middle',
                            align: 'right',
                            fontSize: 15
                        },

                        leaves: {
                            label: {
                                position: 'right',
                                verticalAlign: 'middle',
                                align: 'left'
                            }
                        },

                        emphasis: {
                            focus: 'descendant'
                        },

                        expandAndCollapse: true,
                        animationDuration: 550,
                        animationDurationUpdate: 750
                    }
                ]
            }
            if (option && typeof option === 'object') {
                myChart.setOption(option);
            }
        // })
    }

</script>
</body>
</html>